<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Dashboard by Bootstrapious.com</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- Choices CSS-->
    <link rel="stylesheet" href="../vendor/choices.js/public/assets/styles/choices.min.css">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" href="../vendor/overlayscrollbars/css/OverlayScrollbars.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
  <!--    页内导航-->
  <div class="bg-gray-200 text-sm">
    <div class="container-fluid">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 py-3">
          <li class="breadcrumb-item"><a class="fw-light" href="admin/index.html">Home</a></li>
          <li class="breadcrumb-item active fw-light" aria-current="page">新增图书</li>
        </ol>
      </nav>
    </div>
  </div>
  <!--页内导航 end-->
<!-- 主体页面-->
  <div class="container-fluid">
     <div class="row">
       <div class="col">
         <div class="card">
           <div class="card-header border-bottom">
             <h3 class="h4 mb-0">新增图书</h3>
           </div>
           <div class="card-body">
             <form class="form-horizontal">
               <div class="row gy-2 mb-4">
                 <label class="col-1 form-label text-end"   style="line-height:43px"   for="bookCategory">图书分类</label>
                 <div class="col-sm-4">
                   <select class="form-select" id="bookCategory">
                     <option selected="">Choose...</option>
                     <option value="1">One</option>
                     <option value="2">Two</option>
                     <option value="3">Three</option>
                   </select>
                 </div>
               </div>
               <div class="row gy-2 mb-4 ">
                 <label class="col-1 form-label text-end "  style="line-height:43px"   for="bookName">图书名称</label>
                 <div class="col-sm-6">
                   <input class="form-control" id="bookName" type="text" placeholder="图书名称">
                   <small class="form-text"></small>
                 </div>
               </div>
               <div class="row gy-2 mb-4 ">
                 <label class="col-1 form-label text-end "  style="line-height:43px"   for="bookAuthor">作者</label>
                 <div class="col-sm-6">
                   <input class="form-control" id="bookAuthor" type="text" placeholder="作者">
                   <small class="form-text">多个作者使用逗号分割</small>
                 </div>
               </div>
               <div class="row gy-2 mb-4 ">
                 <label class="col-1 form-label text-end "  style="line-height:43px"   for="bookISBN">基础信息</label>
                 <div class="col-sm-2">
                   <input class="form-control" id="bookISBN" type="text" placeholder="ISBN">
                   <small class="form-text"></small>
                 </div>
                 <div class="col-sm-2">
                   <select class="form-select">
                     <option selected="">开本</option>
                     <option value="1">16开</option>
                     <option value="2">32开</option>
                     <option value="3">128开</option>
                     <option value="3">大16开</option>
                     <option value="3">大32开</option>
                   </select>
                   <small class="form-text"></small>
                 </div>
                 <div class="col-sm-2">
                   <select class="form-select">
                     <option selected="">纸张</option>
                     <option value="1">胶版纸</option>
                     <option value="2">轻型纸</option>
                     <option value="3">纯质纸</option>
                     <option value="3">铜版纸</option>
                   </select>
                   <small class="form-text"></small>
                 </div>
                 <div class="col-sm-2">
                   <select class="form-select">
                     <option selected="">包装</option>
                     <option value="1">平装</option>
                     <option value="2">平装-胶订</option>
                     <option value="3">平塑</option>
                     <option value="3">精装</option>
                   </select>
                   <small class="form-text"></small>
                 </div>
               </div>
               <div class="row gy-2 mb-4">
                 <label class="col-1 form-label text-end" style="line-height:43px" for="bookPrice">图书价格</label>
                 <div class="col-sm-2">
                   <div class="input-group">
                     <div class="input-group-text">￥</div>
                     <input class="form-control" id="bookPrice" type="text" placeholder="price">
                   </div>
                 </div>
               </div>
               <div class="row gy-2 mb-4">
                 <label class="col-1 form-label text-end" style="line-height:43px" for="bookPrice">图书图片</label>
                 <div class="col-sm-4">
                   <div class="input-group">
                     <input class="form-control" id="formFile" type="file">
                   </div>
                 </div>
               </div>
               <div class="row gy-2 mb-4">
                 <label class="col-1 form-label text-end" style="line-height:43px" for="bookContent">图书描述</label>
                 <div class="col-sm-8">
                   <div class="input-group">
                     <textarea class="form-control" id="bookContent" rows="4"></textarea>
                   </div>
                 </div>
               </div>
               <div class="row">
                 <div class="col-2 offset-1">
                   <input class="btn btn-primary d-block" type="button" value="新增">
                 </div>
               </div>
             </form>
           </div>
         </div>
       </div>
     </div>
  </div>
<!-- 主体页面 end-->


    <!-- JavaScript files-->
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/just-validate/js/just-validate.min.js"></script>
    <script src="../vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
    <!-- Main File-->
    <script src="../js/front.js"></script>
    <script>
      // ------------------------------------------------------- //
      //   Inject SVG Sprite - 
      //   see more here 
      //   https://css-tricks.com/ajaxing-svg-sprite/
      // ------------------------------------------------------ //
      function injectSvgSprite(path) {
      
          var ajax = new XMLHttpRequest();
          ajax.open("GET", path, true);
          ajax.send();
          ajax.onload = function(e) {
          var div = document.createElement("div");
          div.className = 'd-none';
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
          }
      }
      // this is set to BootstrapTemple website as you cannot 
      // inject local SVG sprite (using only 'icons/orion-svg-sprite.svg' path)
      // while using file:// protocol
      // pls don't forget to change to your domain :)
      injectSvgSprite('https://bootstraptemple.com/files/icons/orion-svg-sprite.svg'); 
      
      
    </script>
    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </body>
</html>